<template>
  <div>
      <div class="nologin" v-if="fun()">
        <img src="img/newsbg.png" alt="">   
        <h2>登录后可查看消息</h2>
        <button>登录</button>
      
      </div>
      <div class="loginnews" v-else>
          <div class="news-head">
              <h1>消息</h1>
              <span>清除未读</span>
          </div>
          <div class="news-gg">
              <img src="img/newsgg.png" alt="">
          </div>
          <div class="news-list" v-for="(v,i) in this.$store.state.news.arr1" :key="i">
              <div class="news">
                  <div class="list-head">
                      <div class="list-head1"><img :src="v.imgtle" alt="">
                      <h3>{{v.type}}</h3>
                      </div>
                      <span>{{v.day}}</span>
                  </div>
                  <div class="list-con">
                      <div class="list-con-l">
                          <h2>{{v.newtel}}</h2>
                          <span>{{v.news}}</span>
                      </div>
                      <div class="list-con-r">
                          <img :src="v.newsimg" alt="">
                          </div>   
                  </div>
              </div>
          </div>
          
      </div>
      
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            return !(window.localStorage.getItem('Token') != null)||    (window.localStorage.getItem('Token') == "")
           
        }
    },
    mounted(){
        let x = this.fun();
       
        if(!x){
            let usp = new URLSearchParams()
                // usp.append("你发送的key","你发送的val")
                
            usp.append("token",window.localStorage.getItem('Token'))
             this.$store.dispatch("news",{url:"/news",usp})
        }
       
    }
}
</script>

<style scoped>
.nologin{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #F4F4F4;
}
.nologin>button{
    display: block;
    width: 0.9rem;
    height: 0.3rem;
    background-color: #FDC601;
    border: 0;
    border-radius: 0.1rem;
    font-size: 0.12rem;
    font-weight: 600;
    margin-top: 0.2rem;
}
.loginnews{
    width: 100%;
    height: 100vh;
    background-color:#F0F0F0;
}
.news-head{
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    padding:0 0.2rem;
    line-height: 0.5rem;
    background-color: #FFD101;
    display: flex;
    justify-content: flex-end;
}
.news-head>span{
    font-size: 0.12rem;
    font-weight: 600;
    margin-left: 33%;
}
.news-gg{
    width: 3.5rem;
    height: 0.7rem;
    margin: auto;
}
.news-gg>img{
    width: 100%;
    height: 100%;
}
.news{
    width: 3.5rem;
    height: 1.2rem;
    background-color: white;
    border-radius: 0.2rem;
    margin:  0.1rem auto;
    box-sizing: border-box;
    padding: 0.2rem 0.1rem;
}
.list-head{
    display: flex;
    width: 100%;
    height: 0.3rem;
    align-items: center;
    justify-content: space-between;
}
.list-head1{
    display: flex;
   
    align-items: center;
}
.list-head1>img{
    width: 0.3rem;
    height: 100%;
}
.list-con{
    height: 0.5rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.list-con-l{
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.list-con-l>span{
    width: 100%;
     white-space:nowrap;
     overflow:hidden;
      text-overflow:ellipsis;
}
.list-con-l>h2{
    width: 100%;
     white-space:nowrap;
     overflow:hidden;
      text-overflow:ellipsis;
}
.list-con-r{
    flex: 1;
    height: 100%;
}
.list-con-r>img{
    width: 100%;
    height: 100%;
}
</style>